<template>
  <div>
    <a-card :bordered="false" class="table-page-search-wrapper">
      <!-- 查询区域 -->
      <div>
        <a-form
          layout="inline"
          @keyup.enter.native="searchQuery"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-row :gutter="24" justify="center">
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="字典名称：">
                <a-input placeholder="Basic usage" style="width: 200%" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <a-form-model-item label="字典编号：">
                <a-input placeholder="Basic usage" style="width: 200%" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="8" :sm="24">
              <div style="float: right; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button @click="resetList" style="margin-left: 8px">重置</a-button>
              </div>
            </a-col>
          </a-row>
          <!-- <a-row :gutter="24">
            <a-col :xl="8" :lg="8" :md="8" :sm="24" :offset="16">
              <div
                style="float: right; overflow: hidden"
                class="table-page-search-submitButtons"
              >
                <a-button type="primary" @click="search">查询</a-button>
                <a-button @click="resetList" style="margin-left: 8px"
                  >重置</a-button
                >
              </div>
            </a-col>
          </a-row>-->
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="table-page-search-wrapper">
      <a-table :columns="columns" :data-source="data" bordered>
        <template slot="name" slot-scope="text">
          <a>{{ text }}</a>
        </template>
      </a-table>
    </a-card>

    <slider :sliderData="sliderData" :totalWidth="1200" :amount="4" :height="50"></slider>
  </div>
</template>

<script>
import slider from "./slider.vue";
export default {
  components: { slider },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: "名字",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "地址",
          dataIndex: "address",
          key: "address",
        },
      ],
      data: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "纽约",
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "伦敦",
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "悉尼",
        },
      ],

      sliderData: [
        {
          title: "美国作家杰罗姆·大卫·塞林格创作的唯一一部长篇小说",
        },
        {
          title: "首次出版于1951年",
        },
        {
          title:
            "塞林格将故事的起止局限于16岁的中学生霍尔顿·考尔菲德从离开学校到纽约游荡的三天时间内",
        },
        {
          title:
            "并借鉴了意识流天马行空的写作方法，充分探索了一个十几岁少年的内心世界",
        },
        {
          title:
            "愤怒与焦虑是此书的两大主题，主人公的经历和思想在青少年中引起强烈共鸣",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    search() {
      console.log("22");
    },
    resetList() {
      console.log("22");
    },
  },
};
</script>

<style lang="scss" scoped>
.table-page-search-wrapper {
  background: #f0f2f5;
  margin-bottom: 20px;
}
</style>
